import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { SearchOutlined, QuestionCircleTwoTone } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {
    Card, Row, Col, Input, InputNumber, Select, Checkbox, Button, Modal,
} from 'antd';
import SelectGarden from './SelectGarden';
import SelectOperations from './SelectOperations';
import SettingInfo from './SettingInfoElem';

const { Option } = Select;

const IMEIStatus = [
    '未完成初始化',
    '已发送',
    '初始化成功',
];

interface BasicInfoProps {
    dispatch?: Dispatch;
    detailInfo?: any;
    INITINFO?: any;
    isPayMask?: boolean;
    forms: any;
    changeHardwareVersion: (hardwareVersion: string) => void;
    checkPayMask: (tariffpkgId: number) => void;
    getChildData: (values: any, type: number) => void;
}

interface BasicInfoState {
    is_data: boolean;
    visibleGarden: boolean;
    selectGarden: { id?: number, name?: string };
    selectAdmin: { id?: number, name?: string, phone?: string };
    visibleOperations: boolean;
    visibleCabinet: boolean;
    structVersion: string;
    is_set_config: boolean;
    is_payMask: boolean;
    is_cabSend: boolean;
    has_logisId: boolean;
    leadswitchDialog: boolean;
    is_letter_enable: boolean;
}

@connect(({
    cabinetManagementAdd: { detailInfo, isPayMask },
    common: { INITINFO },
}: any) => ({ detailInfo, isPayMask, INITINFO }))

class BasicInfoElem extends Component<BasicInfoProps, BasicInfoState> {
    state = {
        is_data: false, // 是否存在data
        visibleGarden: false,
        selectGarden: {},
        selectAdmin: {},
        visibleOperations: false,
        visibleCabinet: false,
        structVersion: '1.0',
        is_set_config: false,
        is_letter_enable: false,
        is_payMask: false,
        is_cabSend: false,
        has_logisId: false,
        leadswitchDialog: false,
    }

    static getDerivedStateFromProps(nextProps: any, preState: any) {
        const {
            detailInfo,
            checkPayMask,
            isPayMask,
            getChildData,
            forms: { setFieldsValue },
        } = nextProps;
        const { is_data, is_payMask } = preState;
        if (detailInfo.id && !is_data) {
            checkPayMask(detailInfo.tariffpkgId);
            getChildData({ id: detailInfo.gardenId, name: detailInfo.gardenName }, 1);
            getChildData({ id: detailInfo.managerUid, name: detailInfo.managerName }, 2);
            return ({
                is_data: true,
                structVersion: detailInfo.hwareVersion,
                selectGarden: { id: detailInfo.gardenId, name: detailInfo.gardenName },
                is_set_config: Boolean(detailInfo.isDepositEnabled),
                is_letter_enable: Boolean(detailInfo.isLetterEnabled),
                is_cabSend: !!detailInfo.cabSendingEnabled,
                selectAdmin: {
                    id: detailInfo.managerUid,
                    name: detailInfo.managerName,
                    phone: detailInfo.managerPhone,
                },
                has_logisId: !!detailInfo.logisId,
            });
        }
        if (!isPayMask && is_payMask === isPayMask) setFieldsValue({ payMaskStr: [] });
        return { is_payMask: !isPayMask };
    }

    componentDidMount() {
        this.fetchAction('common/fetchLogisList');
        this.fetchAction('common/fetchTariffList');
        this.fetchAction('fetchSlaveTypeList');
    }

    handleChangeGarden = (visibleGarden: boolean) => {
        this.setState({ visibleGarden });
    }

    handleChangeOperations = (visibleOperations: boolean) => {
        this.setState({ visibleOperations });
    }

    handleChangeSetting = (visibleCabinet: boolean) => {
        const { detailInfo }: any = this.props;
        this.setState({ visibleCabinet });
        if (visibleCabinet) {
            this.fetchAction('fetchDepositCab', { cabId: detailInfo.id });
        }
    }

    handleChangeLogis = (val: number) => { // 选择物流中心
        this.setState({ has_logisId: !!val });
    }

    handleChangeCode = (e: any) => { // 输入柜体编号时
        const { value } = e.target;
        const { forms: { setFieldsValue } } = this.props;
        setFieldsValue({ bluetoothName: value });
    }

    handleSelectTariffpkg = (value: any) => { // 选择套餐
        const { checkPayMask } = this.props;
        checkPayMask(value);
    }

    handleChangeDepositEnabled = (e: any) => { // 改变柜体寄存功能
        const { target: { checked } } = e;
        this.setState({ is_set_config: checked });
    }

    handleChangeLetterEnable = (e: any) => { // 改变信报功能
        const { target: { checked } } = e;
        this.setState({ is_letter_enable: checked });
    }

    handleChangeCabSendingEnabled = (e: any) => { // 改变校园柜体寄件功能
        const { target: { checked } } = e;
        this.setState({ is_cabSend: checked });
    }

    selectGarden = (selectGarden: any) => {
        const { forms: { setFieldsValue }, getChildData } = this.props;
        this.setState({ selectGarden });
        getChildData(selectGarden, 1);
        setFieldsValue({ gardenId: selectGarden.name });
    }

    selectAdmin = (selectAdmin: any) => {
        const { forms: { setFieldsValue }, getChildData } = this.props;
        this.setState({ selectAdmin });
        getChildData(selectAdmin, 2);
        setFieldsValue({ managerUid: selectAdmin.name });
    }

    handleSelectHwareVersion: any = (value: string) => { // 改变硬件版本选择
        const { forms: { setFieldsValue }, changeHardwareVersion } = this.props;
        setFieldsValue({
            structVersion: value,
            circuitVersion: value,
            hasScreen: value === '1.0' ? 0 : 1,
            openCodeType: 0,
            idisSaveOrder: 1,
            iotImei: '',
            pushPlatform: value === '7.0' ? 'iot' : 'erlang',
        });
        this.setState({ structVersion: value });
        changeHardwareVersion(value);
    }

    fetchAction = (typeName: string, payload: any = {}) => {
        const { dispatch }: any = this.props;
        const type = typeName.indexOf('common') >= 0
            ? typeName : `cabinetManagementAdd/${typeName}`;
        dispatch({ type, payload });
    }

    render() {
        const {
            visibleGarden,
            selectGarden,
            selectAdmin,
            visibleOperations,
            visibleCabinet,
            structVersion,
            is_payMask,
            is_set_config,
            is_letter_enable,
            is_cabSend,
            has_logisId,
            leadswitchDialog,
        }: any = this.state;

        const {
            forms: { getFieldDecorator },
            INITINFO: { logisList, tariffList },
            detailInfo,
        }: any = this.props;

        return (
            <Card bordered={false} title="基本信息">
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体编号" colon={false}>
                            {getFieldDecorator('code', {
                                initialValue: detailInfo.code,
                                rules: [{ required: true, message: '请输入柜体编号' }],
                            })(
                                <Input
                                    allowClear
                                    disabled={Boolean(detailInfo.id)}
                                    placeholder="请输入"
                                    onChange={this.handleChangeCode}
                                />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　蓝牙名称" colon={false}>
                            {getFieldDecorator('bluetoothName', {
                                initialValue: detailInfo.bluetoothName,
                            })(
                                <Input
                                    allowClear
                                    disabled
                                    placeholder="蓝牙名称与柜体编号保持一致"
                                />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　小区(学校)" colon={false}>
                            {getFieldDecorator('gardenId', {
                                initialValue: selectGarden.name,
                                rules: [{ required: true, message: '请选择小区学校' }],
                            })(
                                <Input
                                    allowClear
                                    readOnly
                                    disabled={Boolean(detailInfo.id)}
                                    suffix={<SearchOutlined />}
                                    placeholder="请选择"
                                    onClick={() => this.handleChangeGarden(true)}
                                />,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体名称" colon={false}>
                            {getFieldDecorator('name', {
                                initialValue: detailInfo.name,
                                rules: [{ required: true, message: '请输入柜体名称' }],
                            })(<Input allowClear placeholder="请输入" />)}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　短信地址" colon={false}>
                            {getFieldDecorator('addr', {
                                initialValue: detailInfo.addr,
                                rules: [
                                    {
                                        required: true,
                                        message: '请输入短信地址',
                                    },
                                    {
                                        type: 'string',
                                        max: 16,
                                        message: '短信地址不能大于16个字符',
                                    },
                                ],
                            })(
                                <Input allowClear placeholder="请输入" />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　物流中心" colon={false}>
                            {getFieldDecorator('logisId', {
                                initialValue: detailInfo.logisId,
                                rules: [{ required: true, message: '请选择物流中心' }],
                            })(
                                <Select
                                    showSearch
                                    placeholder="请选择"
                                    disabled={Boolean(detailInfo.logisId)}
                                    onChange={this.handleChangeLogis}
                                    filterOption={(input: any, option: any) => (
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    )}
                                >
                                    <Option value={0}>无</Option>
                                    {logisList.map((item: any) => (
                                        <Option value={item.id} key={item.id}>{item.name}</Option>
                                    ))}
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　硬件版本" colon={false}>
                            {getFieldDecorator('hwareVersion', {
                                initialValue: detailInfo.hwareVersion || '1.0',
                                rules: [{ required: true, message: '请选择硬件版本' }],
                            })(
                                <Select
                                    disabled={Boolean(detailInfo.id)}
                                    placeholder="请选择"
                                    onSelect={this.handleSelectHwareVersion}
                                >
                                    <Option value="1.0">1.0</Option>
                                    <Option value="2.0">2.0</Option>
                                    <Option value="2.7">2.7</Option>
                                    <Option value="3.0">3.0</Option>
                                    <Option value="4.0">4.0</Option>
                                    <Option value="5.0">5.0</Option>
                                    <Option value="6.0">6.0</Option>
                                    <Option value="7.0">7.0</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　IMEI编号" colon={false}>
                            {getFieldDecorator('iotImei', {
                                initialValue: detailInfo.iotImei,
                                rules: [{ required: structVersion === '7.0', message: '请输入IMEI编号' }],
                            })(<Input disabled={structVersion !== '7.0'} placeholder="请输入" />)}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　　　经度" colon={false}>
                            {getFieldDecorator('longitude', {
                                initialValue: detailInfo.longitude,
                                rules: [{ required: true, message: '请输入经度' }],
                            })(<Input allowClear type="number" step={0.00000000000001} placeholder="请输入" />)}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　结构版本" colon={false}>
                            {getFieldDecorator('structVersion', {
                                initialValue: detailInfo.structVersion || structVersion,
                                rules: [{ required: true, message: '请选择结构版本' }],
                            })(
                                <Select disabled={Boolean(detailInfo.id)} placeholder="请选择">
                                    <Option value={structVersion}>{structVersion}</Option>
                                    {structVersion === '4.0' && <Option value="4.1">4.1</Option>}
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　IMEI状态" colon={false}>
                            <div>{IMEIStatus[detailInfo.iotInitStatus || 0]}</div>
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　　　纬度" colon={false}>
                            {getFieldDecorator('latitude', {
                                initialValue: detailInfo.latitude,
                                rules: [{ required: true, message: '请输入纬度' }],
                            })(<Input allowClear type="number" step={0.0000000000001} placeholder="请输入" />)}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　电路版本" colon={false}>
                            {getFieldDecorator('circuitVersion', {
                                initialValue: detailInfo.circuitVersion || structVersion,
                                rules: [{ required: true, message: '请选择电路版本' }],
                            })(
                                <Select
                                    disabled={Boolean(detailInfo.id)}
                                    placeholder="请选择"
                                >
                                    <Option value={structVersion}>{structVersion}</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　柜体储存订单" colon={false}>
                            {getFieldDecorator('isSaveOrder', {
                                initialValue: detailInfo.isSaveOrder === 0 ? 0 : 1,
                                rules: [{ required: true, message: '请选择柜体储存订单' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value={1}>储存</Option>
                                    {(detailInfo.id || structVersion === '6.0' || structVersion === '7.0') && (
                                        <Option value={0}>不储存</Option>
                                    )}
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体键盘" colon={false}>
                            {getFieldDecorator('hasKeyboard', {
                                initialValue: detailInfo.hasKeyboard === 0 ? 0 : 1,
                                rules: [{ required: true, message: '请选择柜体键盘' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value={1}>有</Option>
                                    <Option value={0}>无</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="滞留时间阈值(天)" colon={false}>
                            {getFieldDecorator('detentionDay', {
                                initialValue: detailInfo.detentionDay || 5,
                                rules: [{ required: true, message: '请输入滞留时间阈值' }],
                            })(
                                <InputNumber
                                    min={0}
                                    max={9999999}
                                    step={1}
                                    precision={0}
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　PUSH类型" colon={false}>
                            {getFieldDecorator('pushPlatform', {
                                initialValue: detailInfo.pushPlatform || 'xinge',
                                rules: [{ required: true, message: '请选择PUSH类型' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value="xinge">信鸽</Option>
                                    <Option value="erlang">erlang</Option>
                                    <Option value="erlang_emqx">erlang_emqx</Option>
                                    <Option
                                        value="iot"
                                        disabled={structVersion !== '7.0'}
                                    >
                                        电信iot平台
                                    </Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体屏幕" colon={false}>
                            {getFieldDecorator('hasScreen', {
                                initialValue: detailInfo.hasScreen || 0,
                                rules: [{ required: true, message: '请选择柜体屏幕' }],
                            })(
                                <Select placeholder="请选择">
                                    {structVersion !== '1.0' && <Option value={1}>有</Option>}
                                    <Option value={0}>无</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>

                    <Col md={8} sm={24}>
                        <Form.Item label="　　滞留个数阈值" colon={false}>
                            {getFieldDecorator('detentionMax', {
                                initialValue: detailInfo.detentionMax || 10,
                                rules: [{ required: true, message: '请输入滞留个数阈值' }],
                            })(
                                <InputNumber
                                    min={0}
                                    max={9999999}
                                    step={1}
                                    precision={0}
                                    placeholder="请输入"
                                    style={{ width: '100%' }}
                                />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　运维人员" colon={false}>
                            {getFieldDecorator('managerUid', {
                                initialValue: selectAdmin.name,
                                rules: [{ required: false, message: '请选择运维人员' }],
                            })(
                                <Input
                                    allowClear
                                    readOnly
                                    suffix={<SearchOutlined />}
                                    placeholder="请选择"
                                    onClick={() => this.handleChangeOperations(true)}
                                />,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　运维电话" colon={false}>
                            {getFieldDecorator('managerPhone', {
                                initialValue: selectAdmin.phone,
                            })(<Input allowClear disabled />)}
                        </Form.Item>
                    </Col>
                </Row>
                {detailInfo.id && (
                    <Fragment>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　　网络类型" colon={false}>
                                    {getFieldDecorator('netType', {
                                        initialValue: detailInfo.netType,
                                        rules: [{ required: false, message: '请输入网络类型' }],
                                    })(<Input allowClear disabled={Boolean(detailInfo.id)} />)}
                                </Form.Item>
                            </Col>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　　固件版本" colon={false}>
                                    {getFieldDecorator('firmVersion', {
                                        initialValue: detailInfo.firmVersion,
                                        rules: [{ required: false, message: '请选择固件版本' }],
                                    })(
                                        <Select disabled={Boolean(detailInfo.id)} placeholder="请选择">
                                            <Option value={1}>硬件版本一</Option>
                                            <Option value={2}>硬件版本二</Option>
                                        </Select>,
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　　系统版本" colon={false}>
                                    {getFieldDecorator('sysVersion', {
                                        initialValue: detailInfo.sysVersion,
                                    })(
                                        <Select
                                            disabled={Boolean(detailInfo.id)}
                                            placeholder="请选择"
                                        >
                                            <Option value={1}>硬件版本一</Option>
                                            <Option value={2}>硬件版本二</Option>
                                        </Select>,
                                    )}
                                </Form.Item>
                            </Col>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　Booter APK版本" colon={false}>
                                    {getFieldDecorator('booterVersion', {
                                        initialValue: detailInfo.booterVersion,
                                        rules: [{ required: false, message: '请输入Booter APK版本' }],
                                    })(
                                        <Input allowClear disabled={Boolean(detailInfo.id)} />,
                                    )}
                                </Form.Item>
                            </Col>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　UI APK版本" colon={false}>
                                    {getFieldDecorator('softVersion', {
                                        initialValue: detailInfo.softVersion,
                                        rules: [{ required: false, message: '请输入UI APK版本' }],
                                    })(<Input allowClear disabled={Boolean(detailInfo.id)} placeholder="请输入" />)}
                                </Form.Item>
                            </Col>
                        </Row>
                        <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　扫码器序列号" colon={false}>
                                    {getFieldDecorator('scannerSid', {
                                        initialValue: detailInfo.scannerSid,
                                        rules: [{ required: false, message: '请输入扫码器序列号' }],
                                    })(
                                        <Input allowClear disabled={Boolean(detailInfo.id)} />,
                                    )}
                                </Form.Item>
                            </Col>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　　　信报箱" colon={false}>
                                    {getFieldDecorator('isLetterEnabled', {
                                        initialValue: !!detailInfo.isLetterEnabled,
                                    })(
                                        <Checkbox
                                            disabled={detailInfo.hwareVersion === '7.0'}
                                            defaultChecked={Boolean(detailInfo.isLetterEnabled)}
                                            checked={is_letter_enable}
                                            onChange={this.handleChangeLetterEnable}
                                        >
                                            信报功能
                                        </Checkbox>,
                                    )}
                                </Form.Item>
                            </Col>
                            <Col md={8} sm={24}>
                                <Form.Item label="　　　　　分辨率" colon={false}>
                                    {getFieldDecorator('resolution', {
                                        initialValue: detailInfo.resolution,
                                        rules: [{ required: false, message: '请输入分辨率' }],
                                    })(
                                        <Input allowClear disabled={Boolean(detailInfo.id)} />,
                                    )}
                                </Form.Item>
                            </Col>
                        </Row>
                    </Fragment>
                )}
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　取件密码类型" colon={false}>
                            {getFieldDecorator('openCodeType', {
                                initialValue: detailInfo.openCodeType || 0,
                                rules: [{ required: true, message: '请选择取件密码类型' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>无</Option>
                                    {(detailInfo.id || structVersion !== '5.0') && <Option value={1}>6位字母和数字</Option>}
                                    <Option value={2}>8位纯数字</Option>
                                </Select>,
                            )}
                            <div style={{ color: 'red', fontWeight: 'bold' }}>
                                7寸等小屏幕密码类型必须选择8位纯数字
                            </div>
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　格口预约状态" colon={false}>
                            {getFieldDecorator('isOpenAppointment', {
                                initialValue: detailInfo.isOpenAppointment || 0,
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>禁用</Option>
                                    <Option value={1}>启用</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　预约保留时间" colon={false}>
                            {getFieldDecorator('retentionLength', {
                                initialValue: detailInfo.retentionLength || 1,
                                rules: [{ required: true, message: '请输入预约保留时间' }],
                            })(
                                <Select placeholder="请选择">
                                    {[...new Array(24)].map((item, index) => (
                                        <Option value={index + 1} key={`${item}`}>{index + 1}小时</Option>
                                    ))}
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="扫码确认柜体编号" colon={false}>
                            {getFieldDecorator('scanConfirm', {
                                initialValue: detailInfo.scanConfirm || 0,
                                rules: [{ required: true, message: '请选择扫码确认柜体编号' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>关闭</Option>
                                    <Option value={1}>开启</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　格口使用编码" colon={false}>
                            {getFieldDecorator('currentSelectedCode', {
                                initialValue: detailInfo.currentSelectedCode || 0,
                                rules: [{ required: true, message: '请选择格口使用编码' }],
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>默认</Option>
                                    <Option value={1}>旧编码</Option>
                                    <Option value={2}>新编码</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　　　套餐" colon={false}>
                            {getFieldDecorator('tariffpkgId', {
                                initialValue: detailInfo.tariffpkgId || 0,
                                rules: [{ required: true, message: '请选择套餐' }],
                            })(
                                <Select
                                    showSearch
                                    placeholder="请选择"
                                    onSelect={(e: any) => this.handleSelectTariffpkg(e)}
                                    filterOption={(input: any, option: any) => (
                                        option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    )}
                                >
                                    <Option value={0}>无</Option>
                                    {tariffList.map((item: any) => (
                                        <Option value={item.id} key={item.id}>{item.name}</Option>
                                    ))}
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体寄存" colon={false}>
                            {getFieldDecorator('isDepositEnabled', {
                                initialValue: detailInfo.isDepositEnabled || 0,
                            })(
                                <Checkbox
                                    disabled={structVersion === '7.0'}
                                    defaultChecked={Boolean(detailInfo.isDepositEnabled)}
                                    checked={is_set_config}
                                    onChange={this.handleChangeDepositEnabled}
                                >
                                    柜体寄存功能
                                </Checkbox>,
                            )}
                            {detailInfo.id && (
                                <Button
                                    type="link"
                                    disabled={!is_set_config}
                                    onClick={() => this.handleChangeSetting(true)}
                                >
                                    配置
                                </Button>
                            )}
                        </Form.Item>
                        {is_set_config && !detailInfo.id && (
                            <div
                                style={{ marginTop: -20, marginBottom: 20 }}
                            >(请在修改菜单，配置格口数量)
                            </div>
                        )}
                    </Col>
                    {has_logisId && (
                        <Col md={8} sm={24}>
                            <Form.Item label="　　　校园柜体寄件" colon={false}>
                                {getFieldDecorator('cabSendingEnabled', {
                                    initialValue: detailInfo.cabSendingEnabled,
                                })(
                                    <Checkbox
                                        defaultChecked={!!detailInfo.cabSendingEnabled}
                                        checked={is_cabSend}
                                        onChange={this.handleChangeCabSendingEnabled}
                                    >
                                        校园柜体寄件功能
                                    </Checkbox>,
                                )}
                            </Form.Item>
                        </Col>
                    )}
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　可用付费方" colon={false}>
                            {getFieldDecorator('payMaskStr', {
                                initialValue: detailInfo.payMaskStr ? detailInfo.payMaskStr.split(',') : [],
                            })(
                                <Checkbox.Group disabled={is_payMask}>
                                    <Checkbox value="1">投递人付费</Checkbox>
                                    <Checkbox value="2">用户付费</Checkbox>
                                </Checkbox.Group>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    {detailInfo.id && (
                        <Col md={8} sm={24}>
                            <Form.Item label="　　　　柜体状态" colon={false}>
                                {getFieldDecorator('status', {
                                    initialValue: detailInfo.status || 1,
                                    rules: [{ required: false, message: '请选择柜体状态' }],
                                })(
                                    <Select placeholder="请选择">
                                        <Option value={1}>调试中</Option>
                                        <Option value={2}>运营中</Option>
                                    </Select>,
                                )}
                            </Form.Item>
                        </Col>
                    )}
                    {detailInfo.id && (
                        <Col md={8} sm={24}>
                            <Form.Item label="　　　　蓝牙地址" colon={false}>
                                {getFieldDecorator('bluetoothMac', {
                                    initialValue: detailInfo.bluetoothMac,
                                    rules: [{ required: false, message: '请输入网络类型' }],
                                })(<Input allowClear disabled={Boolean(detailInfo.id)} />)}
                            </Form.Item>
                        </Col>
                    )}
                    <Col md={8} sm={24}>
                        <Form.Item label="　　柜体投递功能" colon={false}>
                            {getFieldDecorator('isCabDeliEnabled', {
                                initialValue: detailInfo.isCabDeliEnabled === 0 ? 0 : 1,
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>禁用</Option>
                                    <Option value={1}>启用</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　温湿度采集" colon={false}>
                            {getFieldDecorator('isCollection', {
                                initialValue: detailInfo.isCollection || 0,
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>无</Option>
                                    <Option value={1}>有</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    {
                        detailInfo.id && (
                            <Col md={8} sm={24}>
                                <Form.Item label="　投递白名单功能" colon={false}>
                                    {getFieldDecorator('isWhitelist', {
                                        initialValue: detailInfo.isWhitelist || 0,
                                    })(
                                        <Select placeholder="请选择">
                                            <Option value={0}>禁用</Option>
                                            <Option value={1}>启用</Option>
                                        </Select>,
                                    )}
                                </Form.Item>
                            </Col>
                        )
                    }
                    <Col md={8} sm={24}>
                        <Form.Item label="滞留短信发送时间（小时）" colon={false}>
                            {getFieldDecorator('strandedSMSHour', {
                                initialValue: detailInfo.strandedSMSHour === null ? 22 : detailInfo.strandedSMSHour,
                            })(
                                <Select placeholder="请选择">
                                    <Option value={22}>22</Option>
                                    <Option value={36}>36</Option>
                                    <Option value={48}>48</Option>
                                    <Option value={0}>不发送</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　柜体品牌" colon={false}>
                            {getFieldDecorator('brand', {
                                initialValue: detailInfo.brand === null ? 1 : detailInfo.brand,
                            })(
                                <Select placeholder="请选择" disabled={Boolean(detailInfo.id)}>
                                    <Option value={1}>近邻宝</Option>
                                    <Option value={2}>米邻宝</Option>
                                    <Option value={99}>其他</Option>
                                </Select>,
                            )}
                        </Form.Item>
                    </Col>
                    {!Boolean(detailInfo.id) && <Col md={8} sm={24}>
                        <Form.Item label="　　　　　授权码" colon={false}>
                            {getFieldDecorator('registrationCode', {
                                initialValue: detailInfo.registrationCode,
                                rules: [{ required: false, message: '请输入授权码' }],
                            })(
                                <Input placeholder="请输入授权码" allowClear />,
                            )}
                        </Form.Item>
                    </Col>}
                    <Col md={8} sm={24}>
                        <Form.Item label="　　　　引流配置" colon={false} style={{ position: 'relative' }}>
                            {getFieldDecorator('leadswitch', {
                                initialValue: detailInfo.leadswitch || 0,
                            })(
                                <Select placeholder="请选择">
                                    <Option value={0}>关闭</Option>
                                    <Option value={1}>开启</Option>
                                </Select>,
                            )}
                            <QuestionCircleTwoTone
                                style={{
                                    position: 'absolute',
                                    marginLeft: 8,
                                    marginTop: 8,
                                    fontSize: 18,
                                }}
                                onClick={() => this.setState({ leadswitchDialog: true })}
                            />
                        </Form.Item>
                    </Col>
                </Row>
                <SelectGarden
                    VisibleGarden={visibleGarden}
                    ChangeGarden={this.handleChangeGarden.bind(this)}
                    SelectGarden={this.selectGarden.bind(this)}
                />
                <SelectOperations
                    VisibleOperations={visibleOperations}
                    ChangeOperations={this.handleChangeOperations.bind(this)}
                    SelectAdmin={this.selectAdmin.bind(this)}
                />
                <SettingInfo
                    VisibleCabinet={visibleCabinet}
                    CabinetId={detailInfo.id}
                    ChangeSetting={this.handleChangeSetting.bind(this)}
                />

                <Modal
                    title="引流配置说明"
                    visible={leadswitchDialog}
                    onCancel={() => this.setState({ leadswitchDialog: false })}
                    footer={[
                        <div key="ok" style={{ textAlign: 'center' }}>
                            <Button
                                type="primary"
                                onClick={() => this.setState({ leadswitchDialog: false })}
                            >
                                知道了
                            </Button>
                        </div>,
                    ]}
                >
                    <p style={{ textAlign: 'left' }}>
                        引流配置功能是指运营人员可为指定柜体开通引导用户关注
                        公众号的功能。开启后，用户在开通柜体的柜体APP点击
                        【取件】按钮时，会根据柜体归属校园或社区弹出对应公众
                        号二维码关注页面，用户可以选择关注公众号使用公众号取件
                        或者关闭页面继续使用柜体APP取件。
                    </p>
                </Modal>
            </Card>
        );
    }
}

export default BasicInfoElem;
